﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电瓶车客户端</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        /** {
            touch-action: none;
        }*/
        .list-block .item-title.label {
            width: 45%;
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            margin: 4px 0;
        }

        .img-div {
            border: 1px solid #ddd;
            /* border-radius: 100%; */
            float: left;
            line-height: 1;
            margin-left: 10px;
            overflow: hidden;
            height: 6rem
        }
    </style>
</head>
<body>
    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <div class="page page-current" id='router'>
            <header class="bar bar-nav" style="background-color:black">
                <a class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class='title' style="color:white">添加基站</h1>
            </header>
            <div class="content" id="el">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">基站ID</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.base_station_id" id="base_station_id">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- Date -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">基站名称</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.base_station_name" id="base_station_name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">基站地址</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.base_station_address" id="base_station_address">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">经度</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.lat" id="lat">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">纬度</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.lng" id="lng">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">imei</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.imei" id="imei">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">imsi</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.imsi" id="imsi">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">msisdn</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="statuon_info.msisdn" id="msisdn">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">基站状态</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="statuon_info.base_station_state" id="base_station_state">
                                            <option value="0">正常</option>
                                            <option value="1">异常</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">电源状态</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="statuon_info.source_state" id="source_state">
                                            <option value="0">正常</option>
                                            <option value="1">异常</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">外接电源</div>
                                    <div class="item-input">
                                        <select title="请选择一项" v-model="statuon_info.apart_state" id="apart_state">
                                            <option value="0">正常</option>
                                            <option value="1">异常</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-100"><a @click="confirm()" href="#" class="button button-big button-fill button-success">确认并提交</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script>
        $.init()
    </script>
    <script src="js/vue.min.js"></script>
    <script>
        function dynamicLoadJs() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "js/jquery.min.js";
            document.getElementsByTagName('body')[0].appendChild(script);
        }
        function GetQueryString(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : '';
        }
        var vm = new Vue({
            el: '#el',
            data: {
                localurl: 'http://101.132.109.236:8081',
                statuon_info: {
                    id: '',
                    base_station_id: '',//基站ID
                    base_station_name: '',//基站名称
                    base_station_address: '',//基站地址
                    lng: '',//纬度
                    lat: '',//经度
                    imei: '',
                    imsi: '',
                    msisdn: '',
                    base_station_state: '',
                    source_state: '',
                    apart_state: ''
                },
            },
            created: function () {
            },
            methods: {
                confirm: function () {
                    if (vm.statuon_info.base_station_id == '') {
                        $("#base_station_id").focus();
                        $.toast('请输入基站ID');
                        return;
                    }
                    if (vm.statuon_info.base_station_name == '') {
                        $("#base_station_name").focus();
                        $.toast('请输入基站名称');
                        return;
                    }
                    if (vm.statuon_info.base_station_address == '') {
                        $("#base_station_address").focus();
                        $.toast('请输入基站地址');
                        return;
                    }
                    if (vm.statuon_info.lat == '') {
                        $("#lat").focus();
                        $.toast('请输入经度');
                        return;
                    }
                    if (vm.statuon_info.lng == '') {
                        $("#lng").focus();
                        $.toast('请输入纬度');
                        return;
                    }

                    if (vm.statuon_info.imei == '') {
                        $("#imei").focus();
                        $.toast('请输入imei');
                        return;
                    }
                    if (vm.statuon_info.imsi == '') {
                        $("#imsi").focus();
                        $.toast('请输入imsi');
                        return;
                    }
                    if (vm.statuon_info.msisdn == '') {
                        $("#msisdn").focus();
                        $.toast('请输入msisdn');
                        return;
                    }
                    if (vm.statuon_info.base_station_state == '') {
                        $("#base_station_state").focus();
                        $.toast('请选择基站状态');
                        return;
                    }
                    if (vm.statuon_info.source_state == '') {
                        $("#source_state").focus();
                        $.toast('请选择电源状态');
                        return;
                    }
                    if (vm.statuon_info.apart_state == '') {
                        $("#apart_state").focus();
                        $.toast('请选择外接电源状态');
                        return;
                    }
                    vm.addinfo();
                },
                addinfo: function () {
                    var statuon_info = {
                        base_station_id: vm.statuon_info.base_station_id,//基站ID
                        base_station_name: vm.statuon_info.base_station_name,//基站名称
                        base_station_address: vm.statuon_info.base_station_address,//基站地址
                        lng: vm.statuon_info.lng,//纬度
                        lat: vm.statuon_info.lat,//经度
                        imei: vm.statuon_info.imei,
                        imsi: vm.statuon_info.imsi,
                        msisdn: vm.statuon_info.msisdn,
                        base_station_state: vm.statuon_info.base_station_state,
                        source_state: vm.statuon_info.source_state,
                        apart_state: vm.statuon_info.apart_state,
                    }
                    //console.log(car_info)
                    var token = localStorage.getItem("token");
                    $.ajax({
                        url: '' + vm.localurl + '/BaseStation/Insert',
                        data: JSON.stringify(statuon_info),
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        xhrFields: {
                            withCredentials: true
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", token);
                        },
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                $.toast("添加成功");
                                setTimeout(function () {
                                    $.router.back();
                                }, 2000)
                            }
                        },
                        error: function () {

                        }
                    });
                },
            }
        })
    </script>
</body>
</html>